<template>
	<view class="content">
		<uni-collapse accordion="true">
		    <uni-collapse-item title="增加全国大赛" thumb="../../static/zengjia.png">
				<tupian @func="getMsgFormSon"></tupian>
				<input style="text-align: center;height: 35px;" type="text" value="" placeholder="请输入大赛名称" @input="matchName"/>
				
				<timeSelector showType="dateToTime" @btnConfirm="btnConfirm2" @btnCancel="btnCancel2" beginDate="2010-01-01" endDate="2100-12-31" beginTime="00:00:00" endTime="23:59:59">
					<view style="padding-left: 10px;" class="box-title">设置比赛开始时间：</view>
					<view style="padding-left: 20px;color: red;font-size: 16px;" class="box-time">{{ startTimeNotice }}</view>
				</timeSelector>
				
				<timeSelector showType="dateToTime" @btnConfirm="btnConfirm" @btnCancel="btnCancel" beginDate="2010-01-01" endDate="2100-12-31" beginTime="00:00:00" endTime="23:59:59">
					<view style="padding-left: 10px;" class="box-title">设置比赛截止时间：</view>
					<view style="padding-left: 20px;color: red;font-size: 16px;" class="box-time">{{ dateList }}</view>
				</timeSelector>
				
				<button @click="tianjia">完成</button>
		    </uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import tupian from '../tupian/tupian.vue'
	import uniCollapse from '../../components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '../../components/uni-collapse-item/uni-collapse-item.vue'
	import uniSection from '../../components/uni-section/uni-section.vue'
	import timeSelector from '../wing-time-selector/wing-time-selector.vue';
	export default{
		data(){
			return{
				dateList:'点击选择报名截止时间',
				startTimeNotice:'点击选择报名开始时间',
				matchList:{
					msgFormSon:[],
					m_name:'',
					update:'',
					dateList2:'',
					startTime:''
				}
			}
		},
		methods:{
			btnCancel() {
				console.log('取消时间：');
			},
			//设置报名截止时间
			btnConfirm(e) {
				// console.log('确定时间为：', e.key);
				// this.time = e.value;
				this.dateList =  e.key;
				var thisTime =  e.key;
				thisTime = thisTime.replace(/-/g, '/');
				this.matchList.dateList2 = new Date(thisTime);
				this.matchList.dateList2 = this.matchList.dateList2.getTime();
			},
			btnCancel2() {
				console.log('取消时间：');
			},
			//设置报名开始时间
			btnConfirm2(e) {
				// console.log('确定时间为：', e.key);
				// this.time = e.value;
				this.startTimeNotice =  e.key;
				var thisTime =  e.key;
				thisTime = thisTime.replace(/-/g, '/');
				this.matchList.startTime = new Date(thisTime);
				this.matchList.startTime = this.matchList.startTime.getTime();
			},
			//获取大赛图片
			getMsgFormSon(data){
				this.matchList.msgFormSon = data
				// console.log(data)
			},
			//获取大赛标题
			matchName: function(e) {
				this.matchList.m_name = e.detail.value
				// console.log(this.m_name)
			},
			//添加大赛
			tianjia(){
				this.$emit('func',JSON.stringify(this.matchList))
			},
		},
		components:{uniCollapse,uniCollapseItem,uniSection,tupian,timeSelector}
	}
</script>

<style lang="scss" scoped>
	view{
		width: 100%;
		font-size: 14px;
		text-align: left;
		background-color: #fff;
		// border-bottom: 2px solid #DDDDDD;
		line-height: 40px;
		button{
			width: 50%;
			font-size: 12px;
			background-color: #CCE6FF;
			margin: 10px auto;
		}
		input{
			width: 60%;
			border: 2px solid #CCE6FF;
			font-size: 12px;
			margin: 5px auto;
		}
		
	}
</style>
